<template>
	<view class="date-tabs-container" :style="{ backgroundColor: bgColor ? bgColor : '' }">
		<view class="tabs-wrapper">
			<scroll-view scroll-x :show-scrollbar="false" :scroll-left="scrollLeft" scroll-with-animation
				class="scroll-view">
				<view class="date-wrapper">
					<view v-for="(item, index) in list" :key="index" class="date-item"
						:class="index === current ? 'active' : ''" @click="onItemClick(index)">
						<view class="week"><text>{{ item.w }}</text></view>
						<view class="date"><text>{{ item.d }}</text></view>
						<!-- <view class="week" :style="{ color: index === current ? color : '' }">{{ item.w }}</view>
            <view class="date" :class="{ current: index === current }" :style="{
              backgroundColor: index === current && !plain ? color : '',
              borderColor: index === current ? color : '',
              color: index === current && plain ? color : '',
              borderRadius: index === current && circle ? '50%' : ''
            }">{{ item.d }}</view> -->
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="calendar-button" @click="onOpenCalendar">
			<Icons v-if="plain" type="calendar" size="36" :color="color"></Icons>
			<Icons v-else type="calendar-filled" size="36" :color="color"></Icons>
		</view> -->

		<Calendar ref="calendarRef" :insert="false" :date="pickerValue" :startDate="calendarStartDate"
			:endDate="calendarEndDate" :color="color" :plain="plain" :circle="circle" @confirm="onCalendarConfirm">
		</Calendar>
	</view>
</template>
<script setup name="DateTabs">
	import {
		ref,
		computed,
		watch,
		getCurrentInstance,
		nextTick
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import dayjs from './dayjs/esm/index';
	import Calendar from './uni-calendar/uni-calendar.vue'
	import Icons from './uni-icons/uni-icons.vue'

	const emit = defineEmits(['update:modelValue', 'change'])

	const props = defineProps({
		modelValue: {
			type: String,
			default: '',
		},
		startDate: {
			type: String,
			default: ''
		},
		endDate: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: '#007aff'
		},
		bgColor: {
			type: String,
			default: 'white'
		},
		plain: {
			type: Boolean,
			default: false
		},
		circle: {
			type: Boolean,
			default: false,
		}
	})

	const pickerValue = ref('')
	const list = ref([])
	const current = ref(0)
	const scrollLeft = ref(0)
	const dateItemWidth = ref(0)
	const weekdays = ['日', '一', '二', '三', '四', '五', '六']

	const calendarStartDate = computed(() => {
		return props.startDate || dayjs().format('YYYY-MM-DD')
	})

	const calendarEndDate = computed(() => {
		// 设置展示多少天
		return props.endDate || dayjs(calendarStartDate.value).add(6, 'd').format('YYYY-MM-DD')
	})

	const initList = () => {
		const length = dayjs(calendarEndDate.value).diff(dayjs(calendarStartDate.value), 'day')
		for (let i = 0; i <= length; i++) {
			const date = dayjs(calendarStartDate.value).add(i, 'd')
			list.value.push({
				date: date.toDate(),
				dd: date.format('YYYY-MM-DD'),
				d: date.format('D'),
				w: date.isSame(dayjs(), 'day') ? '今日' : (date.format('D') === '1' ? date.format('M月') :
					weekdays[date
						.day()])
			})
		}

		const fulldate = props.modelValue || dayjs().format('YYYY-MM-DD')
		for (let i = 0; i < list.value.length; i++) {
			if (list.value[i].dd === fulldate) {
				current.value = i
				scrollLeft.value = dateItemWidth.value * i + Math.random()
				break
			}
		}

		emit('update:modelValue', list.value[current.value].dd)
	}

	const onItemClick = (index) => {
		current.value = index
		emit('update:modelValue', list.value[current.value].dd)
		emit('change', list.value[current.value])
	}

	const calendarRef = ref()
	const onOpenCalendar = () => {
		pickerValue.value = list.value[current.value].dd
		calendarRef.value.open()
	}

	const onCalendarConfirm = (e) => {
		for (let i = 0; i < list.value.length; i++) {
			if (list.value[i].dd === e.fulldate) {
				onItemClick(i)
				scrollLeft.value = dateItemWidth.value * i + Math.random()
				break
			}
		}
	}

	watch(() => dateItemWidth.value, () => {
		for (let i = 0; i < list.value.length; i++) {
			if (list.value[i].dd === props.modelValue) {
				scrollLeft.value = dateItemWidth.value * i + Math.random()
				break
			}
		}
	})

	const instance = getCurrentInstance()
	onLoad(() => {
		initList()

		nextTick(() => {
			const query = uni.createSelectorQuery().in(instance)
			query.select('.date-item').boundingClientRect(res => {
				dateItemWidth.value = res.width
			}).exec()
		})
	})
</script>
<style lang="scss" scoped>
	.date-tabs-container {
		// width: 100vw;
		height: 120rpx;
		// box-shadow: 0 10rpx 10rpx #f8f8f8;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.tabs-wrapper {
			width: 630rpx;
			// width: 100%;
			// width: calc(100% - 120rpx);

			.scroll-view {
				height: 100%;
				padding-bottom: 4px;

				/* #ifdef H5 */
				// 滚动条的宽度
				::-webkit-scrollbar {
					height: 6px !important;
				}

				::-webkit-scrollbar-track-piece {
					background-color: rgba(144, 147, 153, 0);
				}

				// 滚动条的设置
				::-webkit-scrollbar-thumb {
					background-color: rgba(144, 147, 153, 0.3);
					background-clip: padding-box;
					min-height: 28px;
					border-radius: 3px;
					transition: 0.3s background-color;
				}

				::-webkit-scrollbar-thumb:hover {
					background-color: rgba(144, 147, 153, 0.5);
				}

				/* #endif */

				.date-wrapper {
					display: flex;

					.date-item {
						// height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 12rpx 16rpx;
						margin-right: 16rpx;
						width: 78rpx;
						height: 124rpx;

						&.active {
							background: #DFFFE9;
							border-radius: 0rpx 200rpx 200rpx 200rpx;

							.week {
								background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
							}

							.date {
								background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
							}

						}

						.week,
						.date {
							width: 56rpx;
							// margin: 5rpx 20rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: Source Han Sans CN, Source Han Sans CN;
							text-align: center;
							font-style: normal;
							text-transform: none;
						}

						.week {
							font-weight: 400;
							font-size: 28rpx;
							color: #838385;
							line-height: 33rpx;
							white-space: nowrap;
						}

						.date {
							margin-top: 12rpx;
							font-weight: 500;
							font-size: 36rpx;
							color: #303133;
							line-height: 42rpx;
							white-space: nowrap;
						}

						.current {
							box-sizing: border-box;
							border-width: 2px;
							border-style: solid;
							border-radius: 4px;
							color: white;
							font-weight: bold;
						}
					}
				}
			}
		}

		.calendar-button {
			width: 120rpx;
			height: 100%;
			box-shadow: -10rpx 0 10rpx #f8f8f8;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>